﻿@model List<DHQGHN.PM2.Models.HouseHoldModel>
@{
    ViewBag.Title = "WebGrid with Custom Paging, Sorting";
    WebGrid grid = new WebGrid(rowsPerPage: (int)@ViewData["pageSize"]);
    grid.Bind(@Model,
    autoSortAndPage: false,
    rowCount: Model[0].RECODE_COUNT);
}


@*<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />*@
<div id="gridContent">
@grid.GetHtml(
        //style
        tableStyle: "table table-striped table-bordered table-hover dataTable no-footer", headerStyle: "header", alternatingRowStyle: "alt", selectedRowStyle: "select", rowStyle: "webgrid-row-style",
        //end style
     fillEmptyRows: false,
        //alternatingRowStyle: "alternate-row",
        //headerStyle: "grid-header",
     footerStyle: "grid-footer",
     mode: WebGridPagerModes.All,
     firstText: "|<<",
     previousText: "|<",
     nextText: ">|",
     lastText: ">>|",


     columns: grid.Columns(
         @*grid.Column("HOUSEHOLD_ID", "Mã",
        @<text>
            <span id="spnHouseHoldCode" class="display-mode">@item.HOUSEHOLD_CODE</span>
        </text>, canSort: false, style: "ID"),*@

                grid.Column("HOUSEHOLD_CODE", "Mã hộ", format:
                @<text>
                    <span id="spnHouseHoldCode" class="display-mode">@item.HOUSEHOLD_CODE</span>
                </text>,canSort: false, style:"hidden-480"),

                grid.Column("HOUSEHOLD_NUMBER", "Số hộ", format:
                @<text>
                    <span id="spnHouseHoldNumber" class="display-mode">@item.HOUSEHOLD_NUMBER</span>
                </text>,canSort: false, style:"hidden-480"),

                grid.Column("HOUSEHOLD_NAME", "Tên chủ hộ", format:
                @<text>
                    <div id="spnHouseHoldName" class="hidden-880">@item.HOUSEHOLD_NAME</div>
                    <div class="display-880"><b>@item.HOUSEHOLD_NAME</b></div>
                    <div class="display-480">Mã hộ: @item.HOUSEHOLD_CODE</div>
                    <div class="display-480">Số hộ: @item.HOUSEHOLD_NUMBER</div>
                    <div class="display-880">Phương thức ĐT: @item.SURVEY_METHOD_NAME</div>
                    <div class="display-780">Số nhân khẩu: @item.NUM_OF_HH_MEMBER</div>
                    <div class="display-680">Địa chỉ: @item.ADDRESS_ID_NAME</div>
                    <div class="display-580">Địa bàn điều tra: @item.AREA_ID_NAME</div>
                </text>,canSort: false),

                grid.Column("AREA_ID_NAME", "Địa bàn điều tra", format:
                @<text>
                    <span id="spnAREA_ID_NAME" class="display-mode">@item.AREA_ID_NAME</span>
                </text>,canSort: false, style:"hidden-580"),

                grid.Column("ADDRESS_ID_NAME", "Địa chỉ chi tiết", format:
                @<text>
                    <span id="spnADDRESS_ID_NAME" class="display-mode">@item.ADDRESS_ID_NAME</span>
                </text>,canSort: false, style:"hidden-680"),

                grid.Column("NUM_OF_HH_MEMBER", "Số nhân khẩu", format:
                @<text>
                    <span id="spnNumOfHouseHoldNumber" class="display-mode">@item.NUM_OF_HH_MEMBER</span>
                </text>,canSort: false, style:"hidden-780"),

                                        grid.Column("SURVEY_METHOD_NAME", "Phương thức ĐT", format:
                                        @<text>
                                            <span id="spnSURVEY_METHOD_ID_NAME" class="display-mode">@item.SURVEY_METHOD_NAME</span>
                                        </text>, canSort: false, style:"hidden-880")))
</div>
<script type="text/javascript">
    $(function () {
        var colsHeader = $('#gridContent th');
        $(colsHeader[0]).addClass('hidden-480');
        $(colsHeader[1]).addClass('hidden-480');
        $(colsHeader[3]).addClass('hidden-580');
        $(colsHeader[4]).addClass('hidden-680');
        $(colsHeader[5]).addClass('hidden-780');
        $(colsHeader[6]).addClass('hidden-880');
    });
</script>